<template>
	<view class="container">
		<!-- #ifdef MP-WEIXIN -->
		<view class="wechatapp">
			<view class="header">
				<image src="../../static/image/missing-face.png" mode="aspectFit" class="image"></image>
			</view>
		</view>
		<view class="auth-title">申请获取以下权限</view>
		<view class="auth-subtitle">获得你的公开信息（昵称、头像等）</view>
		<view class="login-btn">
			<u-button :custom-style="customStyle" :ripple="true" lang="zh_CN" throttle-time ="1000" shape="circle" type="primary">授权登录</u-button>
		</view>
		<view class="no-login-btn">
			<u-button lang="zh_CN" throttle-time ="1000" shape="circle" :ripple="true">暂不登录</u-button>
		</view>
		<!-- #endif -->
		
		<!-- #ifdef H5 || APP-VUE || APP-NVUE ||APP-PLUS || APP-PLUS-NVUE-->
			<view class="wechat">
				<view class="loader" >
					<view id="ld4">
						<view></view>
						<view></view>
						<view></view>
						<view></view>
					</view>
					<view id="text">
						<view>微</view>
						<view>信</view>
						<view>登</view>
						<view>录</view>
					</view>
				</view>
			</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: {},
				loginType: '',
				customStyle: {
					backgroundColor: '#0081ff'
				}
			}
		},
		onLoad(options) {
			
		},
		onReady(){
			uni.setNavigationBarColor({
				frontColor : '#000000',
			    backgroundColor: 'rgba(0,0,0,0)',
			})
		},
		methods: {
			
		}
	}
</script>

<style>
	page {
	  background: #fff;
	  font-size: 32rpx;
	}
	.container {
		padding: 60rpx;
	}
	
	.wechatapp {
	  padding: 80rpx 0 48rpx;
	  border-bottom: 1rpx solid #e3e3e3;
	  margin-bottom: 72rpx;
	  text-align: center;
	}
	
	.wechatapp .header .image {
	  width: 200upx;
	  height: 200upx;
	  padding: 1rpx;
	}
	
	.auth-title {
	  color: #585858;
	  font-size: 34rpx;
	  margin-bottom: 40rpx;
	}
	
	.auth-subtitle {
	  color: #888;
	  margin-bottom: 88rpx;
	  font-size: 28rpx;
	}
	
	.login-btn {
	  padding: 0 20rpx;
	}
	
	.login-btn button {
	  height: 88rpx;
	  line-height: 88rpx;
	  background: #2979ff;
	  color: #fff;
	  font-size: 30rpx;
	  border-radius: 40rpx;
	  text-align: center;
	}
	
	.no-login-btn {
	  margin-top: 20rpx;
	  padding: 0 20rpx;
	}
	
	.no-login-btn button {
	  height: 88rpx;
	  line-height: 88rpx;
	  background: #ebebeb;
	  color: #fff;
	  font-size: 30rpx;
	  border-radius: 40rpx;
	  text-align: center;
	}


	.loader {
		width: 80vw;
		height: 80vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center; 
	}
	
	#ld4 {
		position: relative;
		display: flex;
		width: 25%;
		justify-content: space-between; 
	}
	#ld4 view{
		height: 15px;
		width: 15px;
		border-radius: 50%;
		background: #f96770; 
	}
	#ld4 view:nth-child(1){
		animation: ld4 3s linear infinite 0s; 
	}
	#ld4 view:nth-child(2){
	    animation: ld4 3s linear infinite 0.15s; 
	}
	#ld4 view:nth-child(3) {
		animation: ld4 3s linear infinite 0.3s; 
	}
	#ld4 view:nth-child(4) {
	    animation: ld4 3s linear infinite 0.45s; 
	}
	
	@keyframes ld4 {
		0% {
			opacity: 0;
			transform: scale(0.3);
			background: #59CD90; 
		}
		25% {
			opacity: 1;
			transform: scale(1.8);
			background: #fc587d; 
		}
		50% {
			opacity: 0;
			transform: scale(0.3);
			background: #f96770; 
		}
		75% {
			opacity: 1;
			transform: scale(1.8);
			background: #FED766; 
		}
		100% {
			opacity: 0;
		}
	}
	
	#text {
		position: relative;
		display: flex;
		width: 25%;
		justify-content: space-between;
		padding-top: 10rpx;
	}
	#text view{
		height: 15px;
		width: 15px;
		border-radius: 50%;
		
	}
	#text view:nth-child(1){
		animation: text 3s linear infinite 0s; 
	}
	#text view:nth-child(2){
	    animation: text 3s linear infinite 0.15s; 
	}
	#text view:nth-child(3) {
		animation: text 3s linear infinite 0.3s; 
	}
	#text view:nth-child(4) {
	    animation: text 3s linear infinite 0.45s; 
	}
	@keyframes text {
		0% {
			opacity: 0;
			transform: scale(0.3);
			
		}
		25% {
			opacity: 1;
			transform: scale(1.8);
			
		}
		50% {
			opacity: 0;
			transform: scale(0.3);
			
		}
		75% {
			opacity: 1;
			transform: scale(1.8);
			
		}
		100% {
			opacity: 0;
		}
	}
</style>